<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
	<!-- 页面meta -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>商品分类管理</title>
	<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
	<link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
	<link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/plugins/select2/select2.css" />
	<link rel="stylesheet" href="/plugins/select2/select2-bootstrap.css" />
	<script src="/plugins/select2/select2.min.js" type="text/javascript"></script>

	<script>

		var parentId = 0
		$(function () {
			$("#sid").select2()
			$("#update_sid").select2()
			loadItemPage()
		})

		//查询
		function loadItemPage() {
			$.ajax({
				url : "/itemCat/getItemInfo",
				type : "get",
				dataType : "json",
				data : {id : parentId},
				async : false,
				success : function (rs) {
					var itemList = rs.data
					var tr = ""
					if (itemList.length != 0) {
						for (var i = 0; i < itemList.length; i++) {
							tr += '<tr id = "' + itemList[i].id + '">'
							tr += '<td><input type="checkbox" value = "' + itemList[i].id + '" ></td>'
							tr += '<td>' + itemList[i].id + '</td>'
							tr += '<td>' + itemList[i].name + '</td>'
							tr += '<td>' + itemList[i].typeId + '</td>'
							tr += '<td class="text-center">'
							tr += '<button type="button" class="btn bg-olive btn-xs" onclick = "findDown(' + itemList[i].id + ')" >查询下级</button>'
							tr += '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick = "setUpdateValue(' + itemList[i].id + ')" >修改</button>'
							tr += '</td>'
							tr += '</tr>'
						}
						$("#itemList_id").html(tr)
					}
				}
			})
		}
		//回显
		function setUpdateValue(obj) {
			$.ajax({
				url : "/itemCat/updateById",
				type : "get",
				dataType : "json",
				data : {id : obj},
				success : function (rs) {
					$("[name=id]").val(rs.data.id)
					$("[name=name]").val(rs.data.name)
					var va = rs.data.typeId
					$("#update_sid").val(va).trigger("change")
				}
			})
		}

		//目录
		function findDown(obj) {
			var tr = document.getElementById(obj)
			var tds = $(tr).find("td")
			var name = $(tds[2]).text()
			var lis = $("#ol_id").find("li")
			var li = ""
			var span = ""
			var str = ">>" + name
			var count = lis.length
			parentId = obj
			if (parentId == 0) {
				li += '<li><a href = "javascript:findDown(' + 0 + ')">顶级分类列表</a></li>'
				$("#ol_id").html(li)
				$("[name=s]").html("")
				$("[name=ss]").html("")
			}else if (parentId != 0 && count == 1) {
				li += '<li><a href = "javascript:findDown(' + obj + ')">' + name + '</a></li>'
				$("#ol_id").append(li)
				$("[name=s]").html(str)
			}else if (count == 2 && name != null && name != "") {
				li += '<li><a href = "javascript:findDown(' + obj + ')">' + name + '</a></li>'
				$("#ol_id").append(li)
				$("[name=ss]").html(str)
			}

			if (count == 3 && parentId != 0) {
				$("[name=ss]").html("")
				var ol = document.getElementById("ol_id")
				var l = lis[2]
				ol.removeChild(l)
			}
			loadItemPage()
		}

		//批量删除
		function deleteItem() {
			var arr = $("[type=checkbox]:checked")
			var ids = []
			for (var i = 0; i < arr.length; i++) {
				ids.push(arr[i].value)
			}
			$.ajax({
				url : "/itemCat/deleteItem",
				type : "get",
				dataType : "json",
				data : {id : ids},
				traditional : true,
				success : function (rs) {
					console.log(rs)
					alert(rs.message)
					loadItemPage()
				}
			})
		}

		//修改
		function updateItem() {
			$.ajax({
				url : "/itemCat/updateItem",
				type : "get",
				dataType : "json",
				data : {id : $("[name=id]").val(), name : $("#name").val(), typeId : $("#update_sid").val()},
				success : function (rs) {
					alert(rs.message)
					loadItemPage()
				}
			})
		}
		//增加
		function addItem() {
			$.ajax({
				url : "/itemCat/addItem",
				type : "get",
				dataType : "json",
				data : {name : $("[name=name]").val(), typeId : $("[name=typeId]").val(), parentId : parentId},
				success : function (rs) {
					alert(rs.message)
					loadItemPage()
				}
			})
		}
	</script>
</head>

<body class="hold-transition skin-red sidebar-mini" >
<!-- .box-body -->

<div class="box-header with-border">
	<h3 class="box-title">商品分类管理
	</h3>
</div>

<div class="box-body">
	<ol class="breadcrumb" id = "ol_id">
		<li>
			<a href="javascript:findDown(0)" >顶级分类列表</a>
		</li>
		<!--<li>
               <a href="#" id = "a1" ></a>
        </li>
        <li>
            <a href="#" id = a2 ></a>
        </li>-->
	</ol>

	<!-- 数据表格 -->
	<div class="table-box">

		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#addModal" ><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" class="btn btn-default" title="删除" onclick = "deleteItem()" ><i class="fa fa-trash-o"></i> 删除</button>
					<button type="button" class="btn btn-default" title="刷新" ><i class="fa fa-check"></i> 刷新</button>

				</div>
			</div>
		</div>


		<!--数据列表-->
		<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			<thead>
			<tr>
				<th class="" style="padding-right:0px">
					<input type="checkbox" class="icheckbox_square-blue">
				</th>
				<th class="sorting_asc">分类ID</th>
				<th class="sorting">分类名称</th>
				<th class="sorting">类型模板ID</th>

				<th class="text-center">操作</th>
			</tr>
			</thead>
			<tbody id="itemList_id">
			<tr >
				<td><input  type="checkbox" ></td>
				<td>982</td>
				<td>吊坠/项链</td>
				<td>
					11
				</td>
				<td class="text-center">
					<button type="button" class="btn bg-olive btn-xs" >查询下级</button>
					<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
				</td>
			</tr>
			<tr >
				<td><input  type="checkbox"> </td>
				<td>983</td>
				<td>手镯/手链/脚链</td>
				<td>
					11
				</td>
				<td class="text-center">
					<button type="button" class="btn bg-olive btn-xs" >查询下级</button>
					<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
				</td>
			</tr>
			<tr >
				<td><input  type="checkbox" ></td>
				<td>984</td>
				<td>戒指/耳饰</td>
				<td>
					11
				</td>
				<td class="text-center">
					<button type="button" class="btn bg-olive btn-xs" >查询下级</button>
					<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
				</td>
			</tr>
			</tbody>
		</table>
		<!--数据列表/-->

	</div>
	<!-- 数据表格 /-->




</div>
<!-- /.box-body -->


<!-- 编辑窗口 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">商品分类编辑</h3>
			</div>
			<div class="modal-body">

				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>上级商品分类</td>
						<td id = "itemName_id">
							顶级分类列表
							<span id = "s"></span>
							<span id = "ss"></span>
						</td>
					</tr>
					<tr>
						<td>商品分类名称</td>
						<td><input  class="form-control" placeholder="商品分类名称" name = "name">  </td>
					</tr>
					<tr>
						<td>类型模板</td>
						<td>
							<select name = "typeId" id = "sid" style = "width : 100%">
								<option value = "-1">请选择</option>
								<option th:each="t : ${tl}" th:value="${t.id}" th:text="${t.name}"></option>
							</select>
						</td>
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick = "addItem()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">商品分类编辑</h3>
			</div>
			<div class="modal-body">

				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>上级商品分类</td>
						<td>
							顶级分类列表
							<span name = "s"></span>
							<span name = "ss"></span>
						</td>
					</tr>
					<tr>
						<td>商品分类名称</td>
						<td>
							<input type = "hidden" name = "id">
							<input  class="form-control" placeholder="商品分类名称" name = "name" id = "name">
						</td>
					</tr>
					<tr>
						<td>类型模板</td>
						<td>
							<select name = "typeId" id = "update_sid" style = "width : 100%">
								<option value = "-1">请选择</option>
								<option th:each="t : ${tl}" th:value="${t.id}" th:text="${t.name}"></option>
							</select>
						</td>
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick = "updateItem()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
</body>
</html>